<template>
  <div>
    <input type="text" v-model="keyWord">
    <h2>{{ keyWord }}</h2>
  </div>
</template>

<script>
import { customRef } from 'vue';

export default {
  name: 'test_customRef',
  setup() {
    function myRef(value) {
      // 使用 customRef 实现自定义一个 ref，这个作用可以做到监听数据变化，去做对应处理操作
      return customRef((track, trigger) => {
        return {
          get() {
            console.log('从myRef中读取到数据了，', value);
            track()   // 追踪数据变化，不然后面会修改失败
            return value
          },
          set(newValue) {
            console.log('把myRef这个容器中数据改为了：', newValue);
            value = newValue
            trigger()   // 重新解析模板
          }
        }
      })
    }

    let keyWord = myRef('hello')

    return {
      keyWord
    }
  }
}
</script>

